<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '退货详情'
  }
}
</route>

<template>
  <view class="return-detail">
    <!-- 顶部状态 -->
    <view class="status-bar">
      <view style="text-align: center; color: #000; height: 100%">退货商品</view>
    </view>

    <view class="product-list">
      <view class="product-item" v-for="(product, pIndex) in goodsList" :key="pIndex">
        <wd-img :src="product.productMainPic" width="80" height="80"></wd-img>
        <view class="product-info">
          <view class="product-title">{{ product.productName || '--' }}</view>
        </view>
        <view class="product-price">
          <view class="price">¥{{ product.productPrice || '--' }}</view>
          <view class="count">×{{ product.asAmount || '--' }}</view>
        </view>
      </view>
    </view>

    <!-- 退款金额 -->
    <view class="refund-amount">
      <text>退货金额合计</text>
      <text class="amount">¥ {{ order.totalAmount || '--' }}</text>
    </view>

    <!-- 退货地址 -->
    <view class="return-address">
      <view class="section-title">退货地址</view>
      <view class="address-content">
        <view class="address-info">
          <text class="name">发件人：{{ address.returnContact || '--' }}</text>
          <text class="phone">{{ address.returnPhone || '--' }}</text>
        </view>
        <view class="address-detail">{{ address.returnAddress || '--' }}</view>
      </view>
    </view>

    <!-- 提交信息 -->
    <view class="submit-info">
      <view class="info-item jc">
        <text class="label">提交时间：</text>
        <text class="value">{{ order.createTime }}</text>
      </view>
      <view class="info-item jc">
        <text class="label">申请原因：</text>
        <text class="value">{{ order.applyReason }}</text>
      </view>

      <view class="info-item jc">
        <text class="label">功能：</text>
        <text style="color: #007aff; cursor: pointer; text-decoration: underline" @click="handleCopy"> 复制 </text>
      </view>
    </view>

    <!-- 附件 -->
    <view class="attachments">
      <view class="info-item">
        <text class="label">退货备注：</text>
        <text class="value">{{ order.asNotes || '--' }}</text>
      </view>
      <view class="section-title">附件：</view>
      <view class="image-placeholder">
        <wd-img :src="item" width="200rpx" height="200rpx" v-for="(item, index) in order.applyAttachments" :key="index"></wd-img>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 这里可以添加需要的逻辑
import { getAsDetail, getReturnAddress } from '@/service/after-sale/after-sale'
const order = ref({})

const initImg = () => {
  if (order.value.applyAttachments) {
    order.value.applyAttachments = order.value.applyAttachments.split(',')
  }
}

const goodsList = ref([])

const initGoodsList = (asCode: string) => {
  getAsDetail({ asCode }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      goodsList.value = res.result
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      })
    }
  })
}
const address = ref({})
const initAddress = (storeCode: string) => {
  console.log('initAddress')
  getReturnAddress({ storeCode }).then((res) => {
    if (res.code === 200) {
      address.value = res.result
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      })
    }
  })
}
const handleCopy = () => {
  console.log(order.value)
  uni.setClipboardData({
    data: `退货单号：${order.value.asCode} \n 退货金额：${order.value.totalAmount} \n 退货地址：${address.value.returnAddress} \n 联系电话：${address.value.returnPhone}`,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}
onLoad((options) => {
  order.value = JSON.parse(options.order)
  console.log(order.value)
  initImg()
  initGoodsList(order.value.asCode)
  initAddress(order.value.storeCode)
})
</script>

<style lang="scss" scoped>
// :(.wd-img__image){
//   width: 200rpx !important;
//   height: 200rpx !important;
// }
.product-list {
  max-height: 200px;
  background-color: #fff;
  overflow: scroll;
  .product-item {
    display: flex;
    padding: 10px 0;

    .product-img {
      width: 80px;
      height: 80px;
      background: #ff0000;
      border-radius: 4px;
    }

    .product-info {
      flex: 1;
      padding: 0 10px;

      .product-title {
        margin-bottom: 5px;
        font-size: 14px;
        color: #333;
      }

      .product-spec {
        font-size: 12px;
        color: #999;
      }
    }

    .product-price {
      text-align: right;

      .price {
        font-size: 14px;
        color: #ff0000;
      }

      .count {
        margin-top: 5px;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.return-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0rpx 20rpx 32rpx;

  .status-bar {
    background-color: #fff;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    margin-left: 4px;
    padding: 10rpx 10rpx 0;
  }

  .goods-list {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 0 32rpx;

    .goods-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .goods-image {
        width: 160rpx;
        height: 160rpx;
        background-color: #e4001f;
        margin-right: 20rpx;
      }

      .goods-info {
        flex: 1;

        .goods-title {
          font-size: 28rpx;
          margin-bottom: 20rpx;
        }

        .goods-price {
          display: flex;
          justify-content: space-between;
          color: #666;

          .price {
            color: #e4001f;
          }
        }
      }
    }
  }

  .refund-amount {
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .amount {
      color: #e4001f;
      font-weight: bold;
    }
  }

  .return-address {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 32rpx;

    .section-title {
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    .address-content {
      .address-info {
        display: flex;
        gap: 32rpx;
        margin-bottom: 16rpx;
      }

      .address-detail {
        color: #666;
        font-size: 28rpx;
      }
    }
  }

  .submit-info {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 32rpx;
    .jc {
      display: flex;
      justify-content: space-between;
    }
    .info-item {
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #999;
      }
    }
  }

  .return-remark {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 32rpx;

    .section-title {
      margin-bottom: 20rpx;
    }

    .remark-input {
      textarea {
        width: 100%;
        height: 200rpx;
        border: 1rpx solid #eee;
        padding: 20rpx;
        box-sizing: border-box;
      }
    }
  }

  .attachments {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 32rpx;
    .info-item {
      display: flex;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
      .value {
        color: #000;
      }
      .label {
        color: #999;
      }
    }
    .section-title {
      margin-bottom: 20rpx;
    }

    .image-placeholder {
      width: 200rpx;
      height: 200rpx;
    }
  }
}
</style>
